<!--
 * @Author: boyyang
 * @Date: 2022-01-09 13:53:50
 * @LastEditTime: 2022-01-15 17:02:40
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\modalBox\inputBox.vue
-->

<template>
    <div class="input-wrapper">
        <div class="des-before">{{ props.prefix }}:</div>
        <input type="text" :value="props.val" @input="valChange" :disabled="props.disabled" />
    </div>
</template>

<script lang="ts" setup>
export interface IInputBoxProps {
    val?: string;
    prefix?: string;
    disabled?: boolean;
}

interface IInputBoxEmits {
    (e: 'update:val', val: string): void
}

const props = withDefaults(defineProps<IInputBoxProps>(), {
    val: 'boyyang',
    prefix: 'nickName',
    disabled: false
})

const emits = defineEmits<IInputBoxEmits>()

const valChange = (e: any) => {
    emits('update:val', e.target?.value)
}

const cur: string = props.disabled ? 'not-allowed' : 'pointer'

</script>

<style scoped lang="scss">
.input-wrapper {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 15px 0;

    .des-before {
        position: absolute;
        left: -45px;
        font-size: 14px;
        color: whitesmoke;
        font-weight: 400;
    }

    input {
        box-sizing: border-box;
        border: none;
        outline: none;
        background: none;
        color: whitesmoke;
        text-align: center;
        width: 100%;
        height: 100%;
        font-size: 18px;
        cursor: v-bind(cur);
        padding: 0 20px;
        border-bottom: 1px solid rgb(40, 197, 218);
    }
}
</style>
